<template>
  <div class="captcha-container" ref="captchaRef">
    <canvas ref="canvasRef" @click="refreshCaptcha"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';

const props = defineProps({
  code: {
    type: String,
    required: true
  }
});

const emit = defineEmits(['update:code']);

const canvasRef = ref(null);
const captchaRef = ref(null);
let ctx = null;

// 生成随机颜色
const getRandomColor = () => {
  const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#D4A5A5', '#9B59B6', '#3498DB'];
  return colors[Math.floor(Math.random() * colors.length)];
};

// 生成随机数字和字母
const generateRandomChar = () => {
  const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
  return chars[Math.floor(Math.random() * chars.length)];
};

// 绘制干扰点
const drawInterferencePoints = () => {
  for (let i = 0; i < 50; i++) {
    ctx.beginPath();
    ctx.arc(
      Math.random() * canvasRef.value.width,
      Math.random() * canvasRef.value.height,
      1,
      0,
      2 * Math.PI
    );
    ctx.fillStyle = getRandomColor();
    ctx.fill();
  }
};

// 绘制干扰线
const drawInterferenceLines = () => {
  for (let i = 0; i < 3; i++) {
    ctx.beginPath();
    ctx.moveTo(Math.random() * canvasRef.value.width, Math.random() * canvasRef.value.height);
    ctx.lineTo(Math.random() * canvasRef.value.width, Math.random() * canvasRef.value.height);
    ctx.strokeStyle = getRandomColor();
    ctx.lineWidth = 1;
    ctx.stroke();
  }
};

// 绘制验证码
const drawCaptcha = () => {
  if (!canvasRef.value) return;
  
  ctx = canvasRef.value.getContext('2d');
  ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height);
  
  // 设置背景
  ctx.fillStyle = '#f0f0f0';
  ctx.fillRect(0, 0, canvasRef.value.width, canvasRef.value.height);
  
  // 绘制干扰点和线
  drawInterferencePoints();
  drawInterferenceLines();
  
  // 绘制验证码文字
  const code = props.code;
  const charWidth = canvasRef.value.width / 4;
  
  for (let i = 0; i < code.length; i++) {
    ctx.font = 'bold 24px Arial';
    ctx.fillStyle = getRandomColor();
    ctx.textBaseline = 'middle';
    
    // 随机Y轴位置
    const y = canvasRef.value.height / 2 + (Math.random() - 0.5) * 20;
    
    // 随机旋转角度
    const rotation = (Math.random() - 0.5) * 0.3;
    ctx.save();
    ctx.translate(charWidth * i + charWidth / 2, y);
    ctx.rotate(rotation);
    ctx.fillText(code[i], -10, 0);
    ctx.restore();
  }
};

// 刷新验证码
const refreshCaptcha = () => {
  let newCode = '';
  for (let i = 0; i < 4; i++) {
    newCode += generateRandomChar();
  }
  emit('update:code', newCode);
};

// 监听验证码变化
watch(() => props.code, () => {
  drawCaptcha();
});

onMounted(() => {
  // 设置canvas大小
  canvasRef.value.width = 100;
  canvasRef.value.height = 32;
  drawCaptcha();
});
</script>

<style scoped>
.captcha-container {
  display: inline-block;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
}

canvas {
  border: 1px solid #ddd;
  border-radius: 4px;
  vertical-align: middle;
}
</style> 